<template>
  <div v-title data-title="个人中心"></div>
  <header-bar></header-bar>
  <div class="user-card">
    <div class="card-avatar">
      <common-avatar :url="userInfo.avatar" :size="76" :iconsize="50"></common-avatar>
    </div>
    <!--关注粉丝信息-->
    <div class="card-info-box">
      <div class="card-info">
        <div>
          <p class="info-title">投稿</p>
          <p class="info-content">{{ count }}</p>
        </div>
        <div>
          <p class="info-title">关注</p>
          <p class="info-content">{{ following }}</p>
        </div>
        <div>
          <p class="info-title">粉丝</p>
          <p class="info-content">{{ followers }}</p>
        </div>
      </div>
      <n-button type="primary" ghost @click="goPage('EditInfo')">编辑信息</n-button>
    </div>
  </div>
  <div class="card-name">
    <p class="name">{{ userInfo.name }}</p>
    <p class="sign">{{ userInfo.sign }}</p>
  </div>

  <div ref="scrollBox" class="video-list" @scroll="scrollList">
    <video-list :videos="videoList"></video-list>
    <div v-show="loading" class="loading">
      <n-spin></n-spin>
    </div>
  </div>
</template>

<script lang="ts">
import {getMyVideoAPI} from '@/api/video';
import {ref, computed, onMounted, defineComponent} from "vue";
import storage from "@/utils/stored-data";
import {NButton, NSpin, useMessage} from 'naive-ui';
import {useRouter} from "vue-router";
import {getFollowDataAPI} from '@/api/follow';
import CommonAvatar from "@/components/CommonAvatar.vue";
import HeaderBar from "@/components/HeaderBar.vue";
import {videoType} from '@/types/video';
import VideoList from '@/components/VideoList.vue'

export default defineComponent({
  setup() {
    const count = ref(0);
    const followers = ref(0);
    const following = ref(0);
    const router = useRouter();
    const message = useMessage();

    const userInfo = computed(() => {
      return storage.get("userInfo");
    })

    //前往关注和粉丝页面
    const goPage = (name: string) => {
      router.push({name: name});
    }

    //获取关注数和粉丝数
    const getFollowData = (id: number) => {
      getFollowDataAPI(id).then((res) => {
        if (res.data.code === 2000) {
          followers.value = res.data.data.followers
          following.value = res.data.data.following;
        }
      }).catch(() => {
        message.error('获取失败');
      });
    }

    //视频相关
    const page = ref(1);
    const pageSize = 10;
    const noMore = ref(false);
    const loading = ref(false);
    const videoList = ref<Array<videoType>>([]);
    const scrollBox = ref<HTMLElement | null>(null);
    const scrollList = (() => {
      //节流
      var timer: number | null = null;
      return () => {
        if (timer) {
          return
        }

        timer = setTimeout(() => {
          const scrollTop = scrollBox.value?.scrollTop || 0;
          const clientHeight = scrollBox.value?.clientHeight || 0;
          const scrollHeight = scrollBox.value?.scrollHeight || 0;
          if (scrollTop + clientHeight >= scrollHeight - 50) {
            if (!noMore.value && !loading.value) {
              page.value++;
              getMyVideo();
            }
          }
          timer = null;
        }, 500);
      }
    })();

    //获取我的视频
    const getMyVideo = () => {
      getMyVideoAPI(page.value, pageSize).then((res) => {
        const resVideos = res.data.data.videos;
        if (resVideos.length < pageSize) {
          noMore.value = true;
          message.info("没有更多了");
        }
        count.value = res.data.data.count;
        videoList.value = videoList.value.concat(resVideos);
      }).catch(() => {
        message.error('获取失败');
      });
    }

    onMounted(() => {
      getFollowData(userInfo.value!.uid);
      getMyVideo();
    })


    return {
      count,
      loading,
      followers,
      following,
      userInfo,
      scrollBox,
      videoList,
      goPage,
      scrollList
    }
  },
  components: {
    NSpin,
    NButton,
    CommonAvatar,
    VideoList,
    HeaderBar
  },
});
</script>
<style lang="less" scoped>
.user-card {
  display: flex;
  height: 120px;
  align-items: flex-start;

  .card-avatar {
    width: 160px;

    span {
      margin: 16px 30px;
    }
  }

  .card-info-box {
    .card-info {
      width: 210px;
      display: flex;
      justify-content: space-around;

      div {
        width: 70px;
        text-align: center;

        .info-title {
          margin-bottom: 2px;
          // font-weight: bold;
        }

        .info-content {
          margin: 2px 0 6px 0;
        }
      }
    }

    button {
      width: 100%;
    }
  }
}

.card-name {
  margin: 0 10px;

  .name {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
  }

  .sign {
    margin: 3px 0;
    font-size: 14px;
    color: #666;
  }
}

.video-list {
  height: calc(100vh - 200px);
  overflow: scroll;

  .loading {
    padding: 20px 0;
    text-align: center;
  }
}
</style>